<#include "/common/framework.html">
<@header>
    <link rel="stylesheet" href="/static/plugins/datatables/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="/static/plugins/bootstrap-validator/css/bootstrapValidator.min.css">
    <style>
        .dataTables_info {
            float: left;
        }
        #example_length {
            float: left;
            padding-top: 4px;
            margin-left: 13px;
        }
        table tr > th,td {
            text-align: center;
        }
        .selected {
            background: #ccc !important;
        }
        .has-feedback .form-control {
            padding-right: 0 !important;
        }
        .ui-radio {
            line-height: 37px;
            margin-bottom: 10px;
        }
    </style>
</@header>
<@body>
<div class="content-container" id="content">
    <!-- ui buttons -->
    <div class="page page-user-list">

        <ol class="breadcrumb breadcrumb-small">
            <li>系统管理</li>
            <li class="active"><a href="#">权限管理</a></li>
        </ol>

        <div class="page-wrap">
            <div class="row">

                <div class="col-md-12">
                    <div class="panel panel-lined panel-hovered">
                       <#-- <div class="panel-heading">标题</div>-->
                        <div class="panel-body">

                            <div class="row form-inline" style="padding: 0 15px 0 15px">
                                <div class="pull-left">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default waves-effect" data-toggle="modal" data-target="#addUserModal">添加用户</button>
                                        <button type="button" class="btn btn-default waves-effect">批量删除</button>
                                    </div>
                                </div>
                                <form id="queryForm" action="#" method="post">
                                <div class="form-group pull-right">
                                    <input type="email" class="form-control" name="keyword" placeholder="请输入角色名">
                                    <button type="button" class="btn btn-default" id="btn-query">搜索</button>
                                </div>
                                </form>
                            </div>

                            <table id="example" class="display table table-bordered table-striped" cellspacing="0" width="100%" align="center">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" id="checkAll"></th>
                                        <th>ID</th>
                                        <th>父级</th>
                                        <th>名称</th>
                                        <th>类型</th>
                                        <th>状态</th>
                                        <th>排序</th>
                                        <th>路径</th>
                                        <th>权限代码</th>
                                        <th>图标</th>
                                        <th>描述</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- #end page-wrap -->
    </div>
    <!-- #end ui buttons -->


    <!-- 模态框（Modal） -->
    <div class="modal fade" id="addUserModal" data-backdrop="static" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="userForm" class="form-horizontal" autocomplete="off">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">添加权限</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">类型</label>
                            <div class="col-sm-10">
                                <div class="ui-radio ui-radio-primary">
                                    <label>
                                        <input type="radio" name="type" value="1" checked="">
                                        <span>目录</span>
                                    </label>
                                    <label>
                                        <input type="radio" name="type" value="0">
                                        <span>菜单</span>
                                    </label>
                                    <label>
                                        <input type="radio" name="type" value="0">
                                        <span>按钮</span>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="firstname" class="col-sm-2 control-label">名称</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="" placeholder="请输入名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="firstname" class="col-sm-2 control-label">排序</label>
                                <div class="col-sm-10">
                                    <input type="number" class="form-control" name="" placeholder="请输入排序">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="lastname" class="col-sm-2 control-label">状态</label>
                                <div class="col-sm-10">
                                    <div class="ui-radio ui-radio-primary">
                                        <label>
                                            <input type="radio" name="status" value="1" checked="">
                                            <span>启用</span>
                                        </label>
                                        <label>
                                            <input type="radio" name="status" value="0">
                                            <span>禁用</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="updateUserModal" data-backdrop="static" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="userForm" class="form-horizontal" autocomplete="off">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">修改用户</h4>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="id">
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="username" placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">昵称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="nickname" placeholder="请输入昵称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" name="email" placeholder="请输入邮箱">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">状态</label>
                            <div class="col-sm-10">
                                <div class="ui-radio ui-radio-primary">
                                    <label>
                                        <input type="radio" name="status" value="1">
                                        <span>启用</span>
                                    </label>
                                    <label>
                                        <input type="radio" name="status" value="0">
                                        <span>禁用</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <div class="modal fade bs-example-modal-sm" id="MSG" data-backdrop="static" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header" style="background: #e74c3c; margin: 0">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-right: 20px;"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    确定删除
                </div>
                <div class="pull-right" style="padding: 10px">
                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-default btn-sm">确定</button>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

</div>
</@body>
<@js>
    <script src="/static/plugins/datatables/js/jquery.dataTables.min.js"></script>
    <script src="/static/plugins/datatables/js/dataTables.bootstrap.min.js"></script>
    <script src="/static/plugins/bootstrap-validator/js/bootstrapValidator.min.js"></script>
    <script>
        var ajaxConfig = {
            type: "POST",
            dataType: "json",
            async: false
        };

        $(document).ready(function() {
            var tables = $('#example').DataTable({
                searching: false,
                ordering:  false,
                stateSave: true,                            //保持翻页状态，和comTable.fnDraw(false);结合使用
                pagingType: "full_numbers",               //除首页、上一页、下一页、末页四个按钮还有页数按钮
                scrollY: 440,                                //垂直滚动条
                dom: 'tilp',
                serverSide: true,                           //开启服务器模式
                ajax: {
                    type: 'POST',                          //请求方式
                    url: '/admin/permission/getPermissionList',     //数据来源（包括处理分页，排序，过滤） ，即url，action，接口，等等
                    dataSrc: "data",                       //数据来源（包括处理分页，排序，过滤） ，即url，action，接口，等等
                    data: function (d) {
                        var param = {};
                        param.draw = d.draw;
                        param.start = d.start;
                        param.length = d.length;
                        var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                        formData.forEach(function (e) {
                            param[e.name] = e.value;
                        });
                        return param;//自定义需要传递的参数。
                    },
                },
                columns: [
                    { data: 'id' },
                    { data: 'id' },
                    { data: 'pid' },
                    { data: 'name' },
                    { data: 'type' },
                    { data: 'status' },
                    { data: 'sort' },
                    { data: 'url' },
                    { data: 'permCode' },
                    { data: 'icon' },
                    { data: 'description' },
                    { data: null }
                ],
                columnDefs:[
                    {
                        targets: 0,
                        render: function (data, type, row, meta){
                            return '<input type="checkbox" name="id" value="'+data+'">';
                        }
                    },
                    {
                        targets: 5,
                        render: function (data, type, row, meta){
                            if (data == 1) {
                                return '<label class="label label-success">正常</label>';
                            } else {
                                return '<label class="label label label-warning">禁用</label>';
                            }
                        }
                    },
                    {
                        targets: 9,
                        render: function (data, type, row, meta){
                            return '<i class="'+data+'"></i>';
                        }
                    },
                    {
                        targets: -1,
                        render: function (data, type, row, meta) {
                            return '<button class="btn btn-default waves-effect btn-sm" id="editRow">修改</button>' +
                                    '<button class="btn btn-default waves-effect btn-sm" id="deleteRow">删除</button>';
                        }
                    }
                ],
                language: {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "表中数据为空",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    },
                    "oAria": {
                        "sSortAscending": ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    }
                }
            });

            //查询按钮
            $("#btn-query").on("click", function () {
                tables.draw()
            });

            //checkbox全选
            $("#checkAll").on("click", function () {
                if ($(this).prop("checked") === true) {
                    $("table input[name='id']").prop("checked", $(this).prop("checked"));
                    $('table tbody tr').addClass('selected');
                } else {
                    $("table input[name='id']").prop("checked", false);
                    $('table tbody tr').removeClass('selected');
                }
            });

            //删除选中行
            $('table tbody').on('click', 'tr input[name="id"]', function () {
                var $tr = $(this).parents('tr');
                $tr.toggleClass('selected');
                var $tmp = $('[name=id]:checkbox');
                $('#checkAll').prop('checked', $tmp.length == $tmp.filter(':checked').length);

            });

            $("#addUserModal #save").click(function () {

            });

            $("#updateUserModal #save").click(function () {

            });

            $('#addUserModal').on('show.bs.modal', function () {
                $("#addUserModal form").data('bootstrapValidator').destroy();
                $('#addUserModal form').data('bootstrapValidator', null);
                addValidator();
            });
            addValidator();
            function addValidator() {
                $('#addUserModal form').bootstrapValidator({
                    fields: {
                        username: {
                            validators: {
                                notEmpty: {
                                    message: '用户名不能为空'
                                },
                                stringLength: {
                                    max: 30,
                                    message: '用户名长度最多30个字符'
                                },
                                /*remote: {
                                    url: 'remote.php',
                                    message: 'The username is not available'
                                },*/
                            }
                        },
                        nickname: {
                            validators: {
                                notEmpty: {
                                    message: '昵称不能为空'
                                },
                                stringLength: {
                                    max: 30,
                                    message: '昵称长度最多30个字符'
                                },
                                /*remote: {
                                    url: 'remote.php',
                                    message: 'The username is not available'
                                },*/
                            }
                        },
                        email: {
                            validators: {
                                notEmpty: {
                                    message: '邮箱不能为空'
                                },
                                emailAddress: {
                                    message: '请输入有效的邮箱'
                                }
                            }
                        },
                        password: {
                            validators: {
                                notEmpty: {
                                    message: '密码不能为空'
                                },
                                stringLength: {
                                    min: 5,
                                    max: 30,
                                    message: '密码长度在5到30之间'
                                }
                            }
                        },
                        confirmPassword: {
                            validators: {
                                notEmpty: {
                                    message: '确认密码不能为空'
                                },
                                identical: {
                                    field: 'password',
                                    message: '两次密码不相同'
                                }
                            }
                        }
                    }
                }).on('success.form.bv', function(e) {
                    // Prevent form submission
                    e.preventDefault();
                    $.ajax({
                        url: "/admin/user/save",
                        data:  $("#addUserModal #userForm").serialize(),
                        type: "POST",
                        dataType: 'json',
                        success: function(data){
                            $("#addUserModal").modal('hide');
                            if (data.success) {
                                $("#addUserModal").modal('hide');
                                $("#addUserModal form")[0].reset();
                                tables.draw(false);
                            }
                        }
                    });
                });
            }

            //修改 Model
            $('table tbody').on( 'click', '#editRow', function () {
                $("#updateUserModal form")[0].reset();
                var data = tables.row($(this).closest('tr')).data();
                console.log(data)
                for (var item in data) {
                    if (item == 'status') {
                        continue;
                    }
                    $("#updateUserModal input[name='"+item+"']").val(data[item]);
                }
                $("#updateUserModal input[name='status'][value="+data.status+"]").attr("checked",true);
                $("#updateUserModal form").data('bootstrapValidator').destroy();
                $('#updateUserModal form').data('bootstrapValidator', null);
                updateValidator();
                $("#updateUserModal").modal("show");
            });
            updateValidator();
            function updateValidator() {
                $('#updateUserModal form').bootstrapValidator({
                    fields: {
                        username: {
                            validators: {
                                notEmpty: {
                                    message: '用户名不能为空'
                                },
                                stringLength: {
                                    max: 30,
                                    message: '用户名长度最多30个字符'
                                },
                                /*remote: {
                                    url: 'remote.php',
                                    message: 'The username is not available'
                                },*/
                            }
                        },
                        nickname: {
                            validators: {
                                notEmpty: {
                                    message: '昵称不能为空'
                                },
                                stringLength: {
                                    max: 30,
                                    message: '昵称长度最多30个字符'
                                },
                                /*remote: {
                                    url: 'remote.php',
                                    message: 'The username is not available'
                                },*/
                            }
                        },
                        email: {
                            validators: {
                                notEmpty: {
                                    message: '邮箱不能为空'
                                },
                                emailAddress: {
                                    message: '请输入有效的邮箱'
                                }
                            }
                        }
                    }
                }).on('success.form.bv', function(e) {
                    // Prevent form submission
                    e.preventDefault();
                    $.ajax({
                        url: "/admin/user/save",
                        data:  $("#updateUserModal #userForm").serialize(),
                        type: "POST",
                        dataType: 'json',
                        success: function(data){
                            $("#updateUserModal").modal('hide');
                            if (data.success) {
                                $("#updateUserModal").modal('hide');
                                tables.draw(false);
                            }
                        }
                    });
                });
            }


            //删除
            $('table tbody').on( 'click', '#deleteRow', function () {
                var data = tables.row($(this).closest('tr')).data();
                console.log(data)
                $("#MSG").modal('show');
            });

        });
    </script>
</@js>